<template>
    <view :style="{ '--color': color }">
        <status-bar title="开柜存餐" :back="back"></status-bar>
        <view class="Dining" v-if="pageData.smart_locker">
            <view class="Dininfo">
                <text class="black size36 bold ellipsis">{{ pageData.smart_locker.name }}</text>
                <text class="color_66 size30 m-top10 ellipsis_2">{{ pageData.smart_locker.address }}</text>
            </view>
            <view class="d-flex f-column a-center m-left20">
                <text class="black size32 bold">空闲格</text>
                <view class="d-flex a-center black">
                    <text class="size30">{{ pageData.smart_locker.available }}</text>
                    <text class="size30">/</text>
                    <text class="size30">{{ pageData.smart_locker.total }}</text>
                </view>
            </view>
        </view>

        <view class="List" v-if="pageData">
            <text class="serial" v-if="pageData.smart_locker_order">{{ pageData.smart_locker_order.posno }}</text>
            <view class="Cabinet" :class="{ hasOrder: pageData.smart_locker_order }">
                <image :src="$imgUrls(pageData.shopLogo)" v-if="pageData.shopLogo" @click="$common.previewSingle(pageData.shopLogo)" mode="aspectFill" class="CabinetLogo f-shrink-0"></image>
                <view class="Cabinet_Info">
                    <text class="ellipsis title">{{ pageData.shopName }}</text>
                    <text class="color_66 size24 ellipsis_2">{{ pageData.shopAdress }}</text>
                </view>
            </view>

            <text class="black size32 m-top16" user-select>{{ pageData.order_code }}</text>

            <view class="d-flex a-center m-top10">
                <text class="color_66 size28">{{ pageData.uname }}</text>
                <text class="color_66 size28 m-left20" @click.stop="$common.Tel(pageData.utel)">{{ pageData.utel }}</text>
            </view>
            <text class="color_66 size28 m-top4">{{ pageData.address }}</text>

            <view class="merchandise" v-for="(item, index) in pageData.goodsData" :key="index">
                <image :src="$imgUrls(item.goods_img)" mode="aspectFill" class="merImg"></image>

                <view class="merBox">
                    <text class="merTile ellipsis">{{ item.goods_name }}</text>
                    <text class="color_99 size26">{{ item.specs_bind_text }}</text>
                    <text class="color_99 size26" v-if="pageData.add_time_str">下单：{{ pageData.add_time_str }}</text>
                </view>

                <view class="priceNum">
                    <view class="d-flex a-center color_ff4" v-if="item.price">
                        <text class="size22 m-top8">￥</text>
                        <text class="size36 bold500">{{ item.price }}</text>
                    </view>
                    <text class="color_99 size26" v-if="item.goods_num">共{{ item.goods_num }}件</text>
                </view>
            </view>
        </view>

        <view class="footer" v-if="pageData && !pageData.smart_locker_order">
            <view class="Locker">
                <view class="Btns Choose" @click="toUrl(`Cabinet?devno=${devno}&order_code=${order_code}`)">选择空闲格</view>
                <view class="Btns Random" @click.stop="Random">随机开柜</view>
            </view>
        </view>

        <emptys v-if="!pageData"></emptys>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                order_code: '',
                pageData: '',
                devno: ''
            };
        },
        onLoad(opt) {
            if (opt.order_code) this.order_code = opt.order_code;
            if (opt.devno) this.devno = opt.devno;
        },
        onShow() {
            this.orderSingleDetails();
        },
        methods: {
            orderSingleDetails() {
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/orderSingleDetails',
                        data: {
                            order_code: this.order_code,
                            devno: this.devno
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        const result = res.data || '';
                        this.pageData = result;
                    });
            },
            async Random() {
                const result = await this.$Modals('开柜', `是否随机开柜？`);
                if (!result) return;
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/SmartLockerApi/expressPost',
                        data: {
                            order_code: this.order_code,
                            devno: this.devno
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.$Modals('提示', `开柜成功`).then((Rews) => {
                            this.orderSingleDetails();
                        });
                    });
            }
        },
        computed: {
            ...mapState(['color'])
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
    }
</style>
<style lang="scss" scoped>
    .Dining {
        width: 710rpx;
        background-color: #fff;
        padding: 24rpx;
        border-radius: 10rpx;
        margin: 24rpx auto;
        display: flex;
        align-items: center;
        .Dininfo {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
    }

    .List {
        width: 710rpx;
        background-color: #fff;
        padding: 30rpx 20rpx 40rpx 20rpx;
        border-radius: 10rpx;
        overflow: hidden;
        margin: 24rpx auto 0;
        display: flex;
        flex-direction: column;
        position: relative;
        .serial {
            color: #000;
            font-weight: bold;
            font-size: 52rpx;
            position: absolute;
            top: 20rpx;
            right: 20rpx;
        }
        .Cabinet {
            display: flex;

            .CabinetLogo {
                width: 80rpx;
                height: 80rpx;
                border-radius: 6rpx;
                margin-right: 20rpx;
            }
            .Cabinet_Info {
                display: flex;
                flex-direction: column;
                min-height: 80rpx;
                .title {
                    color: #000;
                    font-size: 32rpx;
                    font-weight: bold;
                    margin-bottom: 4rpx;
                }
            }
        }
        .hasOrder {
            width: 500rpx;
        }
        .merchandise {
            width: 100%;
            margin-top: 16rpx;
            display: flex;
            .merImg {
                width: 150rpx;
                height: 150rpx;
                border-radius: 6rpx;
                margin-right: 20rpx;
            }
            .merBox {
                flex: 1;
                height: 150rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .merTile {
                    color: #333;
                    font-size: 30rpx;
                }
            }
            .priceNum {
                height: 150rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding-left: 10rpx;
            }
        }
    }

    .footer {
        width: 100%;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
        .Locker {
            width: 100%;
            height: 120rpx;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            .Btns {
                width: 300rpx;
                height: 88rpx;
                border-radius: 44rpx;
                border: 1px solid var(--color);
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 36rpx;
            }
            .Choose {
                color: var(--color);
            }
            .Random {
                background-color: var(--color);
                color: #fff;
            }
        }
    }
</style>
